<template>
	<div>
		<div style="margin: 0 auto;" class="col-10">
			<form id="createForm" action="#">
				<div>
					<h4>修改部门</h4>
				</div>
				<div class="form-group">
					<label for="code" class="col-1">部门编号:</label>
					<input type="text" v-model="form.code" class="form-control col-4" id="code" placeholder="请输入部门编号">
					<span class="text-danger">*</span>
				</div>
				<div class="form-group">
					<label for="name" class="col-1">部门名称:</label>
					<input type="text" v-model="form.name" class="form-control" id="name" placeholder="请输入部门名称">
					<span class="text-danger">*</span>
				</div>
				<div class="form-group">
					<label for="remark" class="col-1">备注:</label>
					<textarea class="form-control col-8" v-model="form.remark" id="remark" placeholder="请填写备注"></textarea>
				</div>
				<div class="form-group">
					<label>使用状态:</label>
					<label class="form-check-label">
						<input type="radio" class="form-check-input" v-model="form.useState" name="useState" value="1">使用中
					</label>
					<label class="form-check-label">
						<input type="radio" class="form-check-input" v-model="form.useState" name="useState" value="9">已停用
					</label>
				</div>
				<div class="form-group" style="text-align:center">
					<el-button @click="resetForm">重填</el-button>
					<el-button type="primary" @click="submitForm">修改</el-button>
				</div>
			</form>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		defineProps,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import api from '@api/index.js';
	import {
		ElMessage,
		ElMessageBox,
	} from 'element-plus'
	const form = reactive({
		code: '',
		name: '',
		remark: ''
	});
	const props = defineProps({
		depId: {
			type: Number,
			required: true
		}
	});
	//当前修改部门的原始数据
	let original = {};
	let {
		proxy
	} = getCurrentInstance();
	onMounted(() => {
		api.department.getById(props.depId).then((responseData) => {
			let code = responseData.code;
			if (200 !== code) {
				ElMessage.warning(`加载部门数据失败【${response.message}】`);
				return;
			}
			//判断是否查询到数据
			if (responseData.hasOwnProperty('data')) {
				//加载到部门数据
				original = responseData.data;
				//复制数据,在form表单中显示出当前部门数据
				resetForm();
			} else {
				//未查询到数据,说明该部门记录不存在或已被删除
				ElMessage.warning('未加载到部门数据,该部门记录不存在或已被删除!');
			}
		}).catch((error) => {
			ElMessage.warning(error);
		});
	});
	//提交按钮
	const submitForm = () => {
		//检查当前是否查询到带修改的部门数据
		if (!original.hasOwnProperty('depId')) {
			ElMessage.warning('未查询到部门数据无法进行修改!');
			return
		}
		if ('' == form.code) {
			ElMessage.warning('请输入部门编号');
			return;
		}
		if ('' == form.name) {
			ElMessage.warning('请输入部门名称');
			return;
		}
		ElMessageBox.confirm('确定要修改部门吗?', {
			confirmButtonText: '确定修改',
			cancelButtonText: '取消修改'
		}).then(async () => {
			let params = {...form};
      console.info(params)
			let responseData = await api.department.modify(params);
			let code = responseData.code;
			if (200 !== code) {
				ElMessage.warning(`修改失败【${responseData.message}】`);
				return;
			}
			let rows = responseData.data;
			if (1 == rows) {
				ElMessage.success('修改成功');
				//关闭修改模态框 1:表示修改成功
				proxy.$parent.$parent.$parent.reloadData();
			} else if (0 == rows) {
				ElMessage.warning(`记录不存在或已被删除`);
			} else {
				ElMessage.warning(`删除部门,服务器返回未知的状态`);
			}
		});
	}
	//重新填写数据
	const resetForm = () => {
		form.code = original.code;
		form.name = original.name;
		form.useState = original.useState;
		form.remark = original.remark;
		form.depId = original.depId;
	};
</script>

<style scoped>
	@import url('../../assets/css/dml.css');
</style>